<template>
    <div class="ewe-pregnancy-list-view">
        <!-- 搜索筛选区域 -->
        <div class="search-section">
            <div class="search-row">
                <div class="search-item">
                    <label>妊检日期</label>
                    <div class="date-range">
                        <el-date-picker v-model="page.StartPregnancyTime" type="date" placeholder="开始日期" format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD" size="default" />
                        <span class="date-separator">至</span>
                        <el-date-picker v-model="page.EndPregnancyTime" type="date" placeholder="结束日期" format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD" size="default" />
                    </div>
                </div>
                <div class="search-item">
                    <label>种母耳号</label>
                    <el-input v-model="page.PregnancySnowId" placeholder="请输入种母耳号" clearable />
                </div>
                <div class="search-item">
                    <label>负责人</label>
                    <el-select v-model="page.ResponsibleFor" placeholder="请选择">
                        <el-option label="海绵宝宝" value="海绵宝宝" />
                        <el-option label="派大星" value="派大星" />
                        <el-option label="蟹老板" value="蟹老板" />
                    </el-select>
                </div>
                <div class="search-item">
                    <label>妊检结果</label>
                    <el-select v-model="page.PregnancyResult" placeholder="请选择妊检结果" clearable>
                        <el-option label="怀孕" value="pregnant" />
                        <el-option label="未怀孕" value="not_pregnant" />
                        <el-option label="不确定" value="not_pregnant" />
                    </el-select>
                </div>
                <div class="search-item">
                    <label>同胎数</label>
                    <el-select v-model="page.PregnancySameNum" placeholder="请选择同胎数" clearable>
                        <el-option label="未知" value="unknown" />
                        <el-option label="1" :value="1" />
                        <el-option label="2" :value="2" />
                        <el-option label="3" :value="3" />
                        <el-option label="4" :value="4" />
                        <el-option label="5" :value="5" />
                    </el-select>
                </div>
                <div class="search-actions">
                    <el-button type="primary" @click="loadData" :icon="Search">
                        查询
                    </el-button>
                    <el-button @click="handleReset" :icon="Refresh">
                        重置
                    </el-button>
                    <el-button @click="toggleFilterPanel" :icon="ArrowUp">
                        收起
                    </el-button>
                </div>
            </div>
        </div>

        <!-- 操作工具栏 -->
        <div class="toolbar-section">
            <div class="toolbar-left">
                <el-button type="primary" @click="handleAddNew" :icon="Plus">
                    新增
                </el-button>
                <el-button type="success" @click="handleBatchEdit" :icon="Edit" :disabled="selectedRows.length !== 1">
                    修改
                </el-button>
                <el-button type="danger" @click="handleBatchDelete" :icon="Delete" :disabled="selectedRows.length === 0">
                    删除
                </el-button>
                <el-button type="warning" @click="handleBatchReview" :icon="User" :disabled="selectedRows.length === 0">
                    审核
                </el-button>
                <div class="selection-info">
                    <el-icon class="info-icon">
                        <InfoFilled />
                    </el-icon>
                    <span>已选择{{ selectedRows.length }}项</span>
                </div>
            </div>
            <div class="toolbar-right">
                <el-icon class="toolbar-icon" @click="handleRefresh">
                    <Refresh />
                </el-icon>
                <el-icon class="toolbar-icon" @click="handleSettings">
                    <Setting />
                </el-icon>
                <el-icon class="toolbar-icon" @click="handleFilter">
                    <Filter />
                </el-icon>
                <el-icon class="toolbar-icon" @click="handleMore">
                    <More />
                </el-icon>
            </div>
        </div>

        <!-- 主内容区域 -->
        <div class="main-content">
            <!-- 数据表格区域 -->
            <div class="table-section">
                <el-table :data="tableData" border stripe style="width: 100%" @selection-change="handleSelectionChange"
                    @sort-change="handleSortChange" element-loading-text="加载中...">
                    <el-table-column type="selection" width="55" />
                    <el-table-column type="index" label="序号" width="80" align="center" />
                    <el-table-column prop="pregnancyTime" label="妊检日期" width="120" sortable="custom" />
                    <el-table-column prop="pregnancySnowId" label="耳号" width="120" />
                    <el-table-column prop="pregnancyResult" label="妊检结果" width="120" />
                    <el-table-column prop="pregnancyMethod" label="妊检方式" width="120" />
                    <el-table-column prop="pregnancySameNum" label="同胎数" width="100" />
                    <el-table-column prop="pregnancyDayNum" label="妊娠天数" width="100" />
                    <el-table-column prop="pregnancyPoultryhome" label="当前栋舍" width="120" />
                    <el-table-column prop="pregnancyField" label="当前栏位" width="120" />
                    <el-table-column prop="pregnancyTransferhouse" label="转入栋舍" width="120" />
                    <el-table-column prop="pregnancyTransfer" label="转入栏位" width="120" />
                    <!-- <el-table-column prop="responsibleFor" label="负责人" width="120" /> -->
                    <el-table-column label="操作" width="160" fixed="right" align="center">
                        <template #default="{ row }">
                            <el-button type="primary" size="small" @click="handleEdit(row)">
                                编辑
                            </el-button>
                            <el-button type="danger" size="small" @click="handleDelete(row)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!-- 右侧筛选面板 -->
            <!-- <div class="filter-panel" :class="{ 'filter-panel-open': showFilterPanel }">
                <div class="filter-panel-header">
                    <span>筛选条件</span>
                    <el-icon class="close-icon" @click="toggleFilterPanel">
                        <Close />
                    </el-icon>
                </div>
                <div class="filter-panel-content">
                    <div class="filter-group">
                        <label>妊检结果</label>
                        <el-select v-model="filterPanel.examResult" placeholder="请选择妊检结果" clearable
                            @change="handleFilterChange">
                            <el-option label="空胎" value="empty" />
                            <el-option label="返情" value="return_estrus" />
                            <el-option label="流产" value="miscarriage" />
                            <el-option label="怀孕" value="pregnant" />
                            <el-option label="未孕" value="not_pregnant" />
                        </el-select>
                    </div>
                    <div class="filter-group">
                        <label>同胎数</label>
                        <el-select v-model="filterPanel.fetusCount" placeholder="请选择同胎数" clearable
                            @change="handleFilterChange">
                            <el-option label="未知" value="unknown" />
                            <el-option label="1" :value="1" />
                            <el-option label="2" :value="2" />
                            <el-option label="3" :value="3" />
                            <el-option label="4" :value="4" />
                            <el-option label="5" :value="5" />
                        </el-select>
                    </div>
                </div>
            </div> -->
        </div>

        <!-- 分页区域 -->
        <div class="pagination-section">
            <div class="pagination-info">
                <!-- <span>当前为第{{ pagination.currentPage }}页共{{ pagination.totalPages }}页{{ pagination.total }}条数据</span> -->
                <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                    :page-sizes="[1, 2, 3, 4]" :size="page.pageSize" :background="page.totalCount"
                    layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" />
            </div>
        </div>

        <!-- 编辑对话框 -->
        <el-dialog v-model="editDialogVisible" title="编辑妊检记录" width="800px" @close="handleDialogClose">
            <el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editFormRef">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="妊检日期" prop="pregnancyTime">
                            <el-date-picker v-model="editForm.pregnancyTime" type="date" placeholder="选择日期"
                                format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="负责人" prop="responsibleFor">
                            <el-select v-model="editForm.responsibleFor" placeholder="请选择" style="width: 100%">
                                <el-option v-for="person in responsiblePersons" :key="person.value" :label="person.label"
                                    :value="person.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="单据号">
                            <el-input v-model="editForm.documentNumber" readonly />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="耳号" prop="pregnancySnowId">
                            <el-input v-model="editForm.pregnancySnowId" placeholder="请输入耳号" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="妊检结果" prop="pregnancyResult">
                            <el-select v-model="editForm.pregnancyResult" placeholder="请选择" style="width: 100%">
                                <el-option label="怀孕" value="怀孕" />
                                <el-option label="未怀孕" value="未怀孕" />
                                <el-option label="不确定" value="不确定" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="妊检方式" prop="pregnancyMethod">
                            <el-select v-model="editForm.pregnancyMethod" placeholder="请选择" style="width: 100%">
                                <el-option label="B超检查" value="B超检查" />
                                <el-option label="血液检测" value="血液检测" />
                                <el-option label="外部检查" value="外部检查" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="同胎数">
                            <el-input-number v-model="editForm.pregnancySameNum" :min="0" :max="10" style="width: 100%" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="妊娠天数">
                            <el-input-number v-model="editForm.pregnancyDayNum" :min="0" :max="200" style="width: 100%" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="当前栋舍">
                            <el-input v-model="editForm.pregnancyPoultryhome" placeholder="请输入" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="当前栏位">
                            <el-input v-model="editForm.pregnancyField" placeholder="请输入" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="转入栋舍">
                            <el-input v-model="editForm.pregnancyTransferhouse" placeholder="请输入" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="转入栏位">
                            <el-input v-model="editForm.pregnancyTransfer" placeholder="请输入" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="备注">
                            <el-input v-model="editForm.remarks" type="textarea" :rows="2" placeholder="请输入备注" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <el-button @click="editDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleSaveEdit">保存</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
    Plus,
    Delete,
    User,
    Search,
    Refresh,
    Setting,
    Filter,
    More,
    InfoFilled,
    ArrowUp,
    Close,
    Edit
} from '@element-plus/icons-vue'
import { Reads, Writes } from '@/Utils/axiosHelper';
import { useRouter } from 'vue-router'
import { watch } from 'vue';
import axios from 'axios';

const router = useRouter();

// 响应式数据
const searchForm = reactive({
    examDateStart: '',
    examDateEnd: '',
    eweEarTag: '',
    responsiblePerson: '',
    examResult: '',
    fetusCount: ''
})

const filterPanel = reactive({
    examResult: '',
    fetusCount: ''
})

interface PregnancyRow {
    pregnancyId: number
    [key: string]: any
}

const tableData = ref<PregnancyRow[]>([])
const selectedRows = ref<PregnancyRow[]>([])
const showFilterPanel = ref(false)
const page = reactive({
    pageIndex: 1,
    pageSize: 10,
    totalCount: 0,
    totalPage: 0,
    StartPregnancyTime: "",
    EndPregnancyTime: "",
    PregnancySnowId: "",
    ResponsibleFor: "",
    PregnancyResult: "",
    PregnancySameNum: ""
})

// 编辑对话框相关数据
const editDialogVisible = ref(false)
const editFormRef = ref()
const editForm = reactive({
    pregnancyId: 0,
    pregnancySnowId: '',
    pregnancyTime: '',
    pregnancyResult: '',
    pregnancyMethod: '',
    pregnancySameNum: 0,
    pregnancyDayNum: 0,
    pregnancyPoultryhome: '',
    pregnancyField: '',
    pregnancyTransferhouse: '',
    pregnancyTransfer: '',
    responsibleFor: '',
    reviewer: 0,
    reviewerTime: '',
    documentNumber: '',
    remarks: ''
})

// 表单验证规则
const editFormRules = {
    pregnancyTime: [
        { required: true, message: '请选择妊检日期', trigger: 'change' }
    ],
    responsibleFor: [
        { required: true, message: '请选择负责人', trigger: 'change' }
    ],
    pregnancySnowId: [
        { required: true, message: '请输入耳号', trigger: 'blur' }
    ],
    pregnancyResult: [
        { required: true, message: '请选择妊检结果', trigger: 'change' }
    ],
    pregnancyMethod: [
        { required: true, message: '请选择妊检方式', trigger: 'change' }
    ]
}

// 负责人选项
const responsiblePersons = ref([
    { label: '张三', value: 'zhangsan' },
    { label: '李四', value: 'lisi' },
    { label: '王五', value: 'wangwu' }
])

// 加载数据
const loadData = () => {
    Reads.get("Management/GetPregnancy", {
        params: page
    })
        .then(res => {
            tableData.value = res.data.data.data

            page.totalCount = res.data.data.totalCount
            page.totalPage = res.data.data.totalPage
        })
}
onMounted(() => {
    loadData()
})
watch(page, () => {
    loadData()
}, { deep: true })
// 重置处理
const handleReset = () => {
    Object.assign(page, {
        StartPregnancyTime: "",
        EndPregnancyTime: "",
        PregnancySnowId: "",
        ResponsibleFor: "",
        PregnancyResult: "",
        PregnancySameNum: ""
    })
    Object.assign(filterPanel, {
        examResult: '',
        fetusCount: ''
    })
    loadData()
}

// 新增处理
const handleAddNew = () => {
    // TODO: 跳转到新增页面或打开新增对话框
    ElMessage.info('跳转到新增页面')
    router.push('EwePregnancy')
}

// 批量删除处理
const handleBatchDelete = () => {
    if (selectedRows.value.length === 0) {
        ElMessage.warning('请选择要删除的记录')
        return
    }

    ElMessageBox.confirm(
        `确定要删除选中的 ${selectedRows.value.length} 条记录吗？`,
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(async () => {
        try {
            const ids = selectedRows.value.map(row => row.pregnancyId).join(',')
            Writes.delete(`Management/DeleteBatchPregnancy?PregnancyIds=${ids}`)

            ElMessage.success('删除成功')
            selectedRows.value = []
            loadData()
        } catch (error) {
            ElMessage.error('删除失败')
            console.error('Delete error:', error)
        }
    }).catch(() => {
        // 用户取消
    })
}

// 批量审核处理
const handleBatchReview = () => {
    if (selectedRows.value.length === 0) {
        ElMessage.warning('请选择要审核的记录')
        return
    }

    ElMessageBox.confirm(
        `确定要审核选中的 ${selectedRows.value.length} 条记录吗？`,
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(async () => {
        try {
            const ids = selectedRows.value.map(row => row.pregnancyId).join(',')
            Writes.put(`Management/BatchReviewPregnancy?PregnancyIds=${ids}`, {})

            ElMessage.success('审核成功')
            selectedRows.value = []
            loadData()
        } catch (error) {
            ElMessage.error('审核失败')
            console.error('Review error:', error)
        }
    }).catch(() => {
        // 用户取消
    })
}

// 表格选择变化处理
const handleSelectionChange = (selection: any) => {
    selectedRows.value = selection
}

// 排序处理
const handleSortChange = ({ prop, order }: { prop: string, order: string }) => {
    // TODO: 实现排序逻辑
    console.log('Sort by:', prop, order)
    loadData()
}

// 编辑处理 - 打开对话框并反填数据
const handleEdit = async (row: any) => {
    try {
        // 使用表格中的数据反填到编辑表单
        Object.assign(editForm, {
            pregnancyId: row.pregnancyId,
            pregnancySnowId: row.pregnancySnowId || '',
            pregnancyTime: row.pregnancyTime || '',
            pregnancyResult: row.pregnancyResult || '',
            pregnancyMethod: row.pregnancyMethod || '',
            pregnancySameNum: row.pregnancySameNum || 0,
            pregnancyDayNum: row.pregnancyDayNum || 0,
            pregnancyPoultryhome: row.pregnancyPoultryhome || '',
            pregnancyField: row.pregnancyField || '',
            pregnancyTransferhouse: row.pregnancyTransferhouse || '',
            pregnancyTransfer: row.pregnancyTransfer || '',
            responsibleFor: row.responsibleFor || '',
            reviewer: row.reviewer || 0,
            reviewerTime: "2025-10-16T00:00:00.000Z",
            documentNumber: row.documentNumber || '',
            remarks: row.remarks || ''
        })

        // 打开编辑对话框
        editDialogVisible.value = true
    } catch (error) {
        console.error('打开编辑对话框失败:', error)
        ElMessage.error('无法打开编辑对话框')
    }
}

// 批量修改处理
const handleBatchEdit = async () => {
    if (selectedRows.value.length === 0) {
        ElMessage.warning('请选择要修改的记录')
        return
    }

    if (selectedRows.value.length > 1) {
        ElMessage.warning('只能选择一条记录进行修改')
        return
    }

    try {
        // 跳转到编辑页面，传递选中记录的ID
        const selectedRow = selectedRows.value[0]
        if (selectedRow) {
            router.push({
                path: '/EwePregnancy',
                query: {
                    id: selectedRow.pregnancyId,
                    mode: 'edit'
                }
            })
        }
    } catch (error) {
        console.error('跳转编辑页面失败:', error)
        ElMessage.error('无法打开编辑页面')
    }
}


// 删除处理
const handleDelete = (row: any) => {
    ElMessageBox.confirm(
        '确认删除吗?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'error',
        }
    )
        .then(() => {
            Writes.delete("Management/DeletePregnancy?PregnancyId=" + row.pregnancyId)
                .then(res => {
                    if (res.data.code == 200) {
                        ElMessage.success('删除成功')
                        loadData()
                    }
                    else {
                        ElMessage.error('删除失败')
                    }
                })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })
}

// 保存编辑
const handleSaveEdit = async () => {
    if (!editFormRef.value) return

    // 表单验证
    await editFormRef.value.validate((valid: boolean) => {
        if (valid) {
            // 转换日期格式：从 YYYY-MM-DD 转换为完整的 ISO 8601 格式
            let formattedDate = editForm.pregnancyTime;
            if (formattedDate && formattedDate.includes('-')) {
                // 如果没有时间部分，添加默认时间、毫秒和时区
                if (!formattedDate.includes('T')) {
                    formattedDate = `${formattedDate}T00:00:00.000Z`;
                } else if (!formattedDate.includes('Z') && !formattedDate.includes('+')) {
                    // 如果有时间但没有时区，添加 Z
                    formattedDate = `${formattedDate}Z`;
                }
            } else if (!formattedDate) {
                // 如果日期为空，设置为空字符串或者当前时间
                formattedDate = ''
            }

            // 转换 reviewerTime 格式
            let formattedReviewerTime = editForm.reviewerTime;
            if (formattedReviewerTime && formattedReviewerTime.includes('-')) {
                if (!formattedReviewerTime.includes('T')) {
                    formattedReviewerTime = `${formattedReviewerTime}T00:00:00.000Z`;
                } else if (!formattedReviewerTime.includes('Z') && !formattedReviewerTime.includes('+')) {
                    formattedReviewerTime = `${formattedReviewerTime}Z`;
                }
            } else if (!formattedReviewerTime) {
                formattedReviewerTime = ''
            }

            const payload = {
                pregnancyId: editForm.pregnancyId,
                pregnancySnowId: editForm.pregnancySnowId,
                pregnancyTime: formattedDate,
                pregnancyResult: editForm.pregnancyResult,
                pregnancyMethod: editForm.pregnancyMethod,
                pregnancySameNum: editForm.pregnancySameNum,
                pregnancyDayNum: editForm.pregnancyDayNum,
                pregnancyPoultryhome: editForm.pregnancyPoultryhome,
                pregnancyField: editForm.pregnancyField,
                pregnancyTransferhouse: editForm.pregnancyTransferhouse,
                pregnancyTransfer: editForm.pregnancyTransfer,
                responsibleFor: editForm.responsibleFor,
                reviewer: editForm.reviewer,
                reviewerTime: editForm.reviewerTime || "",
                documentNumber: editForm.documentNumber,
                remarks: editForm.remarks || ''
            }

            console.log('修改请求数据:', payload)

            axios.put('http://localhost:5008/api/Management/UpdatePregnancys', payload)
                .then(res => {
                    console.log('修改响应:', res)
                    console.log('响应数据:', res.data)
                    // 尝试多个可能的成功响应码
                    if (res.data.code == 300) {
                        ElMessage.success('修改成功')
                        editDialogVisible.value = false
                        loadData()
                    } else {
                        console.error('修改失败，响应码:', res.data.code)
                        console.error('错误信息:', res.data.msg)
                        ElMessage.error(res.data.msg || `修改失败，错误码: ${res.data.code}`)
                    }
                })
                .catch(error => {
                    console.error('修改失败:', error)
                    console.error('错误详情:', error.response?.data)
                    const errorMsg = error.response?.data?.msg || error.message || '修改失败'
                    ElMessage.error(errorMsg)
                })
        } else {
            ElMessage.warning('请填写完整的表单信息')
        }
    })
}

// 关闭对话框
const handleDialogClose = () => {
    // 重置表单
    Object.assign(editForm, {
        pregnancyId: 0,
        pregnancySnowId: '',
        pregnancyTime: '',
        pregnancyResult: '',
        pregnancyMethod: '',
        pregnancySameNum: 0,
        pregnancyDayNum: 0,
        pregnancyPoultryhome: '',
        pregnancyField: '',
        pregnancyTransferhouse: '',
        pregnancyTransfer: '',
        responsibleFor: '',
        reviewer: 0,
        reviewerTime: '',
        documentNumber: '',
        remarks: ''
    })

    // 清除表单验证
    if (editFormRef.value) {
        editFormRef.value.clearValidate()
    }
}

// 刷新处理
const handleRefresh = () => {
    loadData()
}

// 设置处理
const handleSettings = () => {
    ElMessage.info('打开设置')
}

// 筛选处理
const handleFilter = () => {
    showFilterPanel.value = !showFilterPanel.value
}

// 更多操作处理
const handleMore = () => {
    ElMessage.info('更多操作')
}

// 切换筛选面板
const toggleFilterPanel = () => {
    showFilterPanel.value = !showFilterPanel.value
}

// 工具函数
const formatDate = (dateStr: string): string => {
    if (!dateStr) return '-'
    return dateStr
}

const getExamResultText = (result: string): string => {
    const resultMap: { [key: string]: string } = {
        'empty': '空胎',
        'return_estrus': '返情',
        'miscarriage': '流产',
        'pregnant': '怀孕',
        'not_pregnant': '未孕'
    }
    return resultMap[result] || result
}

const getExamMethodText = (method: string): string => {
    const methodMap: { [key: string]: string } = {
        'ultrasound': 'B超检查',
        'blood_test': '血液检测',
        'external': '外部检查'
    }
    return methodMap[method] || method
}
</script>

<style scoped>
.ewe-pregnancy-list-view {
    padding: 20px;
    background-color: #f5f5f5;
    min-height: 100vh;
    position: relative;
}

/* 搜索区域 */
.search-section {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.search-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.search-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 180px;
}

.search-item label {
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

.date-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-separator {
    color: #666;
    font-size: 14px;
}

.search-actions {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

/* 工具栏区域 */
.toolbar-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.selection-info {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #666;
    font-size: 14px;
}

.info-icon {
    color: #f56c6c;
    font-size: 16px;
}

.toolbar-right {
    display: flex;
    gap: 15px;
}

.toolbar-icon {
    font-size: 18px;
    color: #666;
    cursor: pointer;
    transition: color 0.3s;
}

.toolbar-icon:hover {
    color: #409eff;
}

/* 主内容区域 */
.main-content {
    display: flex;
    gap: 20px;
    position: relative;
}

/* 表格区域 */
.table-section {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    flex: 1;
}

.column-header {
    display: flex;
    align-items: center;
    gap: 5px;
}

.filter-icon {
    font-size: 12px;
    color: #999;
}

/* 右侧筛选面板 */
.filter-panel {
    position: fixed;
    top: 50%;
    right: -300px;
    transform: translateY(-50%);
    width: 300px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: right 0.3s ease;
    z-index: 1000;
}

.filter-panel-open {
    right: 20px;
}

.filter-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    font-weight: 600;
    color: #333;
}

.close-icon {
    font-size: 16px;
    color: #666;
    cursor: pointer;
    transition: color 0.3s;
}

.close-icon:hover {
    color: #f56c6c;
}

.filter-panel-content {
    padding: 20px;
}

.filter-group {
    margin-bottom: 20px;
}

.filter-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

/* 分页区域 */
.pagination-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-size-control {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 14px;
}

.pagination-info {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #666;
    font-size: 14px;
}

/* 表格样式优化 */
:deep(.el-table) {
    border-radius: 8px;
    overflow: hidden;
}

:deep(.el-table th) {
    background-color: #f8f9fa;
    color: #333;
    font-weight: 600;
}

:deep(.el-table td) {
    padding: 8px 0;
}

:deep(.el-table .el-table__empty-text) {
    color: #999;
    font-size: 14px;
}

/* 按钮样式 */
:deep(.el-button--primary) {
    background-color: #f56c6c;
    border-color: #f56c6c;
}

:deep(.el-button--primary:hover) {
    background-color: #f78989;
    border-color: #f78989;
}

:deep(.el-button--danger) {
    background-color: #ff9ff3;
    border-color: #ff9ff3;
}

:deep(.el-button--danger:hover) {
    background-color: #ffb3f7;
    border-color: #ffb3f7;
}

:deep(.el-button--warning) {
    background-color: #ff9ff3;
    border-color: #ff9ff3;
}

:deep(.el-button--warning:hover) {
    background-color: #ffb3f7;
    border-color: #ffb3f7;
}

/* 分页样式 */
:deep(.el-pagination .el-pager li.active) {
    background-color: #f56c6c;
    color: white;
}

:deep(.el-pagination .el-pager li:hover) {
    color: #f56c6c;
}

/* 选择器样式 */
:deep(.el-select .el-input.is-focus .el-input__wrapper) {
    box-shadow: 0 0 0 1px #f56c6c inset;
}

/* 响应式设计 */
@media (max-width: 1400px) {
    .filter-panel {
        width: 280px;
    }

    .filter-panel-open {
        right: 10px;
    }
}

@media (max-width: 1200px) {
    .search-row {
        flex-direction: column;
        align-items: stretch;
    }

    .search-item {
        min-width: 100%;
    }

    .search-actions {
        margin-left: 0;
        justify-content: center;
    }

    .main-content {
        flex-direction: column;
    }

    .filter-panel {
        position: relative;
        right: auto;
        transform: none;
        width: 100%;
        margin-bottom: 20px;
    }

    .filter-panel-open {
        right: auto;
    }
}

@media (max-width: 768px) {
    .ewe-pregnancy-list-view {
        padding: 10px;
    }

    .toolbar-section {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }

    .toolbar-left {
        justify-content: center;
        flex-wrap: wrap;
    }

    .toolbar-right {
        justify-content: center;
    }

    .pagination-section {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }

    .pagination-info {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}
</style>
